<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide () {    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。                                             
            return {
                reload: this.reload                                              
            }
        },
        data() {
            return{
                isRouterAlive: true                    //控制视图是否显示的变量
            }
        },
        methods: {
            reload () {
                this.isRouterAlive = false;            //先关闭，
                this.$nextTick(function () {
                    this.isRouterAlive = true;         //再打开
                }) 
            }
        }
}
</script>

<style>
  #app{
    padding: 0;
    margin: 0;
    width: 100%;
    min-height:100vh;
  }
  .el-container.is-vertical{
    height: 100vh;
  }
  .el-dialog__header{
    /* width: 335px; */
    padding: 0 ;
    background: #108EE9;
    text-align: center;
  }
  .el-dialog__title{
    display: inline-block;
    /* width: 778px; */
    height: 44px;
    line-height: 44px;
    /* text-align: center; */
    /* margin: 0 auto; */
    background: #108EE9;
    color: #fff;
  }
  .el-dialog__headerbtn{
    top: 15px;
  }
  .el-dialog__headerbtn .el-dialog__close{
    color: #fff;
  }
  .el-dialog__body{
    padding-top: 0;
  }
  /* tabs样式 */
  .el-tabs--top .el-tabs__item.is-top{
    width: 156px;
    text-align: center;
  }
  .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
    width:156px;
    text-align: center;
  }
</style>
